<!--
 * @Author: your name
 * @Date: 2023-08-16 00:02:02
 * @LastEditTime: 2023-08-16 22:44:39
 * @LastEditors: your name
 * @Description: 
-->
<template>
  <div class="screen-center-2">
    <Bubble :list="oldData" @change="handleBubbleChange" />

    <GDialog
      v-if="showDialog"
      ref="GDialog"
      :dialog="showDialog"
      title="明细"
      :isDetail="true"
      width="60%"
      top="15vh"
      bodyHeight="55vh"
      v-loading="loading"
      @close="showDialog = false"
      customClass="dialog-table g-crud-dialog-setting"
    >
      <!-- <dv-border-box-8> </dv-border-box-8> -->
      <div class="dialog-table_main">
        <el-table :data="tableData" style="width: 100%" height="100%">
          <el-table-column
            v-for="col in option"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
            width="auto"
          >
          </el-table-column>
        </el-table>

        <g-pagination
          :total="total"
          :currentPage="queryParams.page"
          :pageSize="queryParams.size"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
        ></g-pagination>
      </div>
    </GDialog>
  </div>
</template>

<script>
export default {
  components: {
    Bubble: () => import("./bubble.vue"),
  },
  data() {
    return {
      oldData: [
        {
          id: 1,
          name: "吊装",
          value: "12",
          dur: 6,
        },
        {
          id: 2,
          name: "动火",
          value: "2",
          dur: 3,
        },
        {
          id: 3,
          name: "动土",
          value: "13",
          dur: 5,
        },
        {
          id: 4,
          name: "断路",
          value: "22",
          dur: 5,
        },
        {
          id: 1,
          name: "吊装",
          value: "12",
          dur: 6,
        },
        {
          id: 2,
          name: "动火",
          value: "2",
          dur: 3,
        },
        {
          id: 3,
          name: "动土",
          value: "13",
          dur: 5,
        },
        {
          id: 4,
          name: "断路",
          value: "22",
          dur: 5,
        },
        {
          id: 1,
          name: "吊装",
          value: "12",
          dur: 6,
        },
        {
          id: 2,
          name: "动火",
          value: "2",
          dur: 3,
        },
      ],
      selectedItem: {},
      showDialog: false,
      loading: false,
      option: [
        {
          prop: "filename",
          label: "文件名",
        },
        {
          prop: "dept",
          label: "部门",
        },
        {
          prop: "uploadTime",
          label: "上传时间",
        },
      ],
      tableData: [
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
        {
          filename: "2023年第二季度培训记录",
          dept: "技术部门",
          uploadTime: "2023-08-15",
        },
      ],
      total: 0,
      queryParams: {
        page: 1,
        size: 10,
      },
    };
  },
  methods: {
    handleBubbleChange(item) {
      this.selectedItem = item;
      this.showDialog = true;
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    sizeChange(val) {
      this.queryParams.size = val;
    },
    currentChange(val) {
      this.queryParams.page = val;
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/mixin.scss";

.screen-center-2 {
  width: 100%;
  flex: 1;
  padding: 0 1vh 1vh;
  box-sizing: border-box;
}

.g-crud-dialog-setting {
  position: relative;
  .dialog-table_main {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .el-table {
      flex: 1;
    }
    .g-pagination {
    }
  }

  // .dv-border-box-8 {
  //   width: 100%;
  //   height: 110%;
  //   position: absolute;
  //   left: 0;
  //   top: -5vh;
  //   background: rgba(255, 255, 255, 0.3);
  // }
}

@include TableDialog;
</style>